<template>
  <div class="select">
    <c-title>
      <template v-slot:title>
        快速选择  
      </template>  
     </c-title>
    <div class="wrap">
      <div class="select_box">
        <ul class="uls">
          <li
          v-for="item,index in select" :key="item.id"
          @click="goGoodsList(item.id,item.cate_name)"
          > 
            <a 
              
            :class="[index == 0 ? 'one':'',index == 1 ? 'two':'',index == 2 ? 'three':'',
            index == 3 ? 'one':'',index == 4 ? 'two':'',index == 5 ? 'three':'',
            index == 6 ? 'one':'',index == 7 ? 'two':'',index == 8 ? 'three':'',
            index == 9 ? 'one':'',index == 10 ? 'two':'',index == 11 ? 'three':'',
            ]"
            >
         
                <img v-lazy="item.pic" alt="">
                <p>{{item.cate_name}}</p>
         
            </a>
          </li>
        
        </ul>
      </div>
      <!-- <lazy-component>
  <img v-for="img in imageList" v-lazy="img" />
</lazy-component> -->
    </div>
  </div>
</template>
<script>
// 1 4 7  i  1  4 % 3*i == 1   

import CTitle from "@/components/ctitle/CTitle.vue";
export default {
  name: "MySelect",
  data(){
      return{
          square:0,
          index:0,
          id:101,
          title:"香水"
      }
  },
  watch:{
    index(){
      if(this.index % 3 == 1){
        this.square+1
      }
    }
  },
  computed:{
    
  },
  methods:{
    recodeIndex(i){
      this.index = i
    },

    goGoodsList(id,title){
      
      this.$router.push(`/goods_list?id=${id}&title=${title}`)
    }
  },
  props:{
      select:{
          type:Array
      }
  },
  components: {
    CTitle,
  },
};
</script>

<style lang="scss" scoped>
.select {
  background-color: #fff;
  .wrap{
      padding: 12px 15px 0px;
      .select_box::-webkit-scrollbar{
        display: none;
      }
      .select_box{
          // width: 100%;
          // height: 150px;
          padding-bottom: 18px;
          border-bottom: 1px solid #eee;
          overflow-x: auto;
            .uls{
                display: flex;
                li{
                  margin-right: 12px;
                  flex-shrink:0 ;
                  
                 
                    width: 90px;
                    a{
                        display: block;
                        width: 100%;
                       
                        p{
                            text-align: center;
                            height: 30px;
                            line-height: 30px;
                            color: #282828;
                            font-size: 12px;
                        }
                        >img{
                            width:100%;
                            height: 90px;
                        }
                    }
                    a.one{
                      border-bottom: 3px solid #47b479;
                    }
                    a.two{
                      border-bottom: 3px solid #579afe;
                    }
                    a.three{
                      border-bottom: 3px solid #ff6960;
                    }
                }
            }
      }

  }
}
.bc1{
  border-bottom: 1px solid #47b479;
}
.bc2{
  border-bottom: 1px solid  #579afe;
}
.bc3{
 border-bottom: 1px solid #ff6960;
}
</style>

